@import './var.scss';
@import './mixins.scss';

$icon-button-width: 2em;
$icon-button-padding: calc(0.5em - #{$button-border-width});

.icon-button {
  align-items: center;
  outline: 0;
  font-size: $size-normal;
  border-radius: 50%;
  padding: $icon-button-padding;
  position: relative;
  line-height: 1;
  width: $icon-button-width;
  height: $icon-button-width;
  outline: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
  background-color: $button-background-color;
  border-style: solid;
  border-color: $button-border-color;
  border-width: $button-border-width;
  color: $button-color;
  cursor: pointer;

  &::before {
    font-size: inherit;
    color: inherit;
  }

  &:focus,
  &.is-focused,
  &:active,
  &.is-active {
    outline: none;
  }

  &[disabled],
  fieldset[disabled] & {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &:hover,
  &.is-hovered {
    border-color: $button-hover-border-color;
    color: $button-hover-color;
  }

  &:focus,
  &.is-focused {
    border-color: $button-focus-border-color;
    color: $button-focus-color;

    &:not(:active) {
      box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
    }
  }

  &:active,
  &.is-active {
    border-color: $button-active-border-color;
    color: $button-active-color;
  }

  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      @include button-color($color, $color-invert);
    }
  }

  &.is-small {
    // font-size: 1rem;
    font-size: $size-small;
    width: 2em;
    height: 2em;
    // padding: calc(0.5em - #{$button-border-width});
  }

  &.is-medium {
    font-size: $size-medium;
  }

  &.is-large {
    font-size: $size-large;
  }
}

.buttons .icon-button:not(:last-child):not(.is-fullwidth) {
  margin-right: 0.5rem;
}
